<template>
  <div id="outer">
    <div id="one">
      <el-collapse>
        <el-collapse-item
          v-for="(item, index) in content"
          :key="index"
          :name="index"
        >
          <template slot="title">
            订单ID：{{ item.id }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            下单时间：{{ item.orderTime }}
          </template>
            <el-table :data="orderDetail[index]" style="width: 100%">
              <el-table-column prop="goodsName" label="商品名称" width="360">
              </el-table-column>
              <el-table-column prop="num" label="商品数量" width="180">
              </el-table-column>
              <el-table-column prop="dealPrice" label="成交价格" width="180">
              </el-table-column>
            </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      activeNames: ["1"],
      content: [],
      orderDetail:[],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    order() {
      axios
        .get("/order/listByUser", {
          params: {
            userId: this.$store.state.clientId,
          },
        })
        .then((response) => {
          console.log('请求订单数据');
          this.content = response.data;
          var detail=[];
          for(var i = 0;i<response.data.length;i++){
            detail.push(response.data[i].orderDetail);
          }
          for(var i = 0;i<detail.length;i++){
            for(var j = 0;j<detail[i].length;j++){
              var nums = detail[i][j].nums;
              nums = nums.split(',');
              var num = nums[0];
              nums = nums[1].split('=');
              var dealPrice = nums[1];
              detail[i][j].num = num;
              detail[i][j].dealPrice = dealPrice;
            }
          }
          console.log(detail);
          
          this.orderDetail = detail;
        })
        .catch((error) => {
          //console.log(error);
        });
    },
  },
  mounted(){
    this.order();
  }
};
</script>
<style>
#outer{
  margin-left: 200px;
  margin-right: 200px;
}
</style>